<template>
  <div class="sm">
    <span class="sm-title">职工管理</span>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="职位">
        <el-select v-model="search.position" placeholder="选择职位">
          <el-option
            :label="position.name"
            :value="position.roleId"
            v-for="(position) in positionAll"
            :key="position.roleId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label>
        <el-input placeholder="输入关键字" v-model="search.keyWord"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogFormVisible=true">新建职工</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="empId" label="编号" width="180"></el-table-column>
      <el-table-column prop="name" label="职工名称" width="180"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="telephone" label="联系电话"></el-table-column>
      <el-table-column prop="position" label="职位"></el-table-column>
      <el-table-column prop="class" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--        新建职工-->
    <el-dialog title="新建职工" :visible.sync="dialogFormVisible" width="60vw">
      <el-form
        class="new-stu-dialog"
        label-position="left"
        label-width="70px"
        style="overflow: hidden"
      >
        <div>
          <el-form-item label="职工姓名">
            <el-input autocomplete="off" v-model="newForm.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="newForm.sex" label="1">男</el-radio>
            <el-radio v-model="newForm.sex" label="2">女</el-radio>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input autocomplete="off" v-model="newForm.identityId"></el-input>
          </el-form-item>
          <el-form-item label="职位">
            <el-select v-model="newForm.position" placeholder="选择职位">
              <el-option
                      :label="position.name"
                      :value="position.roleId"
                      v-for="(position) in positionAll"
                      :key="position.roleId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职称">
            <el-input autocomplete="off" v-model="newForm.title"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input autocomplete="off" v-model="newForm.telephone"></el-input>
          </el-form-item>
        </div>
        <div style="margin-left: 20px">
          <div class="stu-img" style>
            <el-upload
              class="avatar-uploader"
              :action="'api/'+this.$store.state.scId+'/emp/pic/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              accept=".jpg, .png"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <el-form-item label="生日">
            <el-date-picker v-model="newForm.birthday" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="专业">
            <el-input autocomplete="off" v-model="newForm.profession"></el-input>
          </el-form-item>
          <el-form-item label="卡号">
            <el-input autocomplete="off" v-model="newForm.bankCardId"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateEmp">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "StaffManage",
  data() {
    return {
      dialogFormVisible: false,
      newForm:{
        name: '',   //姓名
        identityId: '',//身份证
        position: '',//职位
        profession: '',//专业
        sex: '',//性别
        title: '',//职称
        telephone: '',//电话
        bankCardId: '',//银行卡
        birthday:''
      },
      search:{
        position: "",
        keyWord:""
      },
      radio: "",
      imageUrl: "",
      positionAll: [
        {
          name: "教导主任",
          roleId: "1",
        },
      ],
      tableData: [
        {
          empId: "sc2020207151503001",
          name: "张三",
          sex: "男",
          telephone: "135876987654",
          position: "教导主任",
        },
      ],
    };
  },
  computed: {
    scId() {
      return this.$store.state.scId;
    },
  },
  methods: {
    getEmpFindAll() {   //获取所有员工
      this.$Http
        .empFindAll(this.scId)
        .then((res) => {
          console.log(res)
          let data = res.data;
          this.tableData = data.map(item=>{
            return {
              empId: item.empId,
              name: item.name,
              sex: item.sex===1?'男':'女',
              telephone: item.telephone,
              position: this.positionAll.filter(fitem=>{return fitem.roleId === item.position}).map(mitem=>mitem.name)
            }
          });
        })
        .catch(()=>{
          console.log('err')
        });
    },
    getRoleFindAll() {    //获取所有职位
      this.$Http
        .roleFindAll()
        .then((res) => {
          let data = res.data;
          this.positionAll = data.data.map((item) => {
            return {
              name: item.name,
              roleId: item.roleId,
            };
          });
        })
        .catch();
    },
    handleSearch(){ //查询
      if(this.search.keyWord === '' && this.search.selectedPosition === ''){
        this.$message.warning('请选择条件')
      }else{
        this.empFindByCondition(this.search)
      }
    },
    async handleCreateEmp(){
      let newForm = this.newForm
      // this.empSave()
      if(newForm.name === '' ||newForm.position === '' ||newForm.profession === '' ||newForm.sex === '' ||newForm.telephone === '' ||newForm.title===''||newForm.bankCardId===''||newForm.birthday===''||newForm.identityId==='') {
        this.$message.warning("请填写完所有表单");
      }else{
        this.newForm.organization = {
          orgId: this.scId
        }
        this.empSave()
      }
    },
    empSave() {   //新建职工
      this.$Http.empSava(this.scId,this.newForm).then(res=>{
        console.log(res)
        if(res.data.status === 200){
          this.$message.success("新建成功")
          this.getEmpFindAll()
          this.dialogFormVisible = false
        }else{
          this.$message.error("失败")
        }
      }).catch()
    },

    empFindByCondition(params){     //根据条件查员工
      this.$Http.empFindByCondition(this.scId,params).then(res=>{
        console.log(res)
        let data = res.data;
        this.tableData = data.data.content.map(item=>{
          return {
            empId: item.empId,
            name: item.name,
            position: this.positionAll.filter(fitem=>fitem.roleId === item.position).map(mitem=>mitem.name),
            sex: item.sex === 1 ? '男': '女',
            telephone: item.telephone
          }
        });
      }).catch()
    },
    handleClick(row) {
      console.log(row);
    },
    handleAvatarSuccess(res, file) {    //图片上传成功
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$message.success("图片上传成功");
    },
  },
  mounted() {
    this.getRoleFindAll();
    this.getEmpFindAll();
  },
  watch: {
    scId: {
      handler() {
        this.getEmpFindAll();
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style scoped lang="scss">
@import "../../../public/style.scss";
.sm {
  color: $normalColor;
  font-size: 18px;
}
.sm-title {
  color: $normalColor;
  font-weight: 700;
  font-size: 28px;
  display: block;
  margin-bottom: 30px;
}
.el-input {
  width: 20vw;
}
.new-stu-dialog {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.stu-img {
  text-align: center;
  width: 200px;
  border: 1px solid gray;
  //   height: 100px;
  //   width: 100px;
  //   background: cornflowerblue;
  margin: 0 auto 30px auto;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>